<template>
	<view class="fineArt" v-if="message">
		<view style="position: relative" @tap="toDetail" :data-type='message.category==0?"normal":"information"'>
			<view class="choose" :class="{choosed:ischoose}" v-if="isNeedChoose"></view>
			<image :src="message.fineImage?message.fineImage.split(',')[0]:src" mode="widthFix"  @load='onloading' @error="onloading"  ></image>
		</view>
		<view class="fineArt_body">
			<text class="two_ellipsis fineArt_body_content" @tap="toDetail" :data-type='message.category==0?"normal":"information"'>{{message.fineTitle?message.fineTitle:message.fineContent?message.fineContent:'分享图片'}}</text>
			<view class="author_message" >
				<image :src="message.userImage?message.userImage:'/static/img/toux2x.png'" @tap="toPersonalDeail" :data-userid="message.userId" data-type='艺术精品'></image>
				<text @tap="toPersonalDeail" :data-userid="message.userId" data-type='艺术精品'>{{message.userName}}</text>
				<view @tap="toPraise">
					<image :src="message.zan==0?praised:praise" ></image>
					<text :class="{isDoed:message.zan==0}">{{message.zanNumber>0?message.zanNumber:'点赞'}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import urls from "@/common/util/homeArtIndex.js"
	export default {
		name:"fineArt",
		props:['src','index','isNeedChoose','ischoose','message','isInMy'],
		inject: ['waterfallItem'],
		data() {
			return {
				isPraise:true,
				praise:require('@/static/svg/praise.svg'),
				praised:require('@/static/svg/praise1.svg'),
				id:""
			}
		},
		methods: {
			onloading(){
				try{
					this.waterfallItem.onloading()
				}catch(e){
					//TODO handle the exception
				}
			},
			toDetail(e){
				if(this.isNeedChoose){
					this.$emit("choose",1,this.index)
					return
				}
				if(e.currentTarget.dataset.type=='normal'){
					if(this.isInMy){
						uni.navigateTo({
							url: '/pages/fineArts/fineArtIndex?fineId='+this.message.fineId+"&State="+this.message.category+"&examine="+this.message.examine
						})
						return
					}
					uni.navigateTo({
						url: '/pages/fineArts/fineArtIndex?fineId='+this.message.fineId+"&State="+this.message.category
					})
				}else{
					uni.navigateTo({
						url: '/pages/fineArts/fineArtsInformation?fineId='+this.message.fineId+"&State="+this.message.category
					})
				}
				
			},
			async toPraise(){
				if(!localStorage.getItem('userId')){
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				let data={}
				data.fineId=this.message.fineId
				data.userId=localStorage.getItem('userId')
				data.category=3
				data.state=1
				let res
				if(this.message.zan!=0){
					res=await urls.fineArtfabulous(data)
					if(res.code==0){
						this.$emit('praise',this.index,true)
					}
				}else{
					res=await urls.fineArtreduceZan(data)
					if(res.code==0){
						this.$emit('praise',this.index,false)
					}
				}	
				
			}
		},
	}
</script>

<style lang="scss" scoped>
.fineArt{
	width: 330rpx;
	margin-top: 30rpx;
	border-radius: 6rpx;
	background-color: #FFFFFF;
	image{
		width: 330rpx;
		height: auto;
		display: block;
		border-top-left-radius:  6rpx;
		border-top-right-radius: 6rpx;
	}
	.fineArt_body{
		padding: 20rpx 16rpx;
		background-color:#FFFFFF ;
		.fineArt_body_content{
			font-size: 28rpx;
			color: #333333;
			line-height: 34rpx;
			letter-spacing: 2rpx;
			text-align: justify;
			font-weight: bold;
			width: 100%;
			max-height: 68rpx;
		}
		.author_message{
			display: flex;
			align-items: center;
			position: relative;
			margin-top: 20rpx;
			image{
				height: 36rpx;
				width: 36rpx;
				border-radius: 50%;
				display: block;
			}
			text{
				font-size: 22rpx;
				color: #666666;
				line-height: 24rpx;
				margin-left: 8rpx;
			}
			view{
				display: flex;
				align-items: center;
				position: absolute;
				right: 0;
				text{
					font-size: 24rpx;
					letter-spacing: 1rpx;
				}
				image{
					height: 28rpx;
					width: 28rpx;
				}
				.isDoed{
					color:#B3392B;
				}
			}
		}
	}
}
.choose{
	min-width:42rpx;
	height: 42rpx;
	width: 42rpx;
	border-radius: 50%;
	border: 2rpx solid #BBBBBB;
	background-color:#FFFFFF ;
	position: absolute;
	right: 12rpx;
	bottom: 12rpx;
	z-index: 2;
}
.choosed{
	background-image: url('/static/svg/isChoose.svg');
	background-position: 0 0 ;
	background-repeat: no-repeat;
	background-size: 100%;
	border: 0 !important;
	background-color: unset;
}
</style>
